<template>
	<view class="apps">
		<view class="game_top">
			<image src="https://english.godmans.top/static/images/game_top.jpg"></image>
			<view class="backBtn" @click="handleback()">返回首页</view>
			<view class="tabBtn" @click="playData.choose = true">切换关卡</view>
		</view>
		<view class="game">
			<view class="game-info">
				<view class="flex" v-if="playData.game.length > 0">
					<uv-grid :col="3">
						<uv-grid-item v-for="(item,index) in playData.game" :key="index">
							<view class="ptb10 plr10 flex f1">
								<view :class="`f1  rdmcolor`+((Math.random()*15+item.ids+index)%15+1)" @click="choosePlay(item,index)" hover-class="cirle-hover">
									<view class="f1 flex jcc aic fweight6 white cirle">
									<text class=" f30r plr10">{{item.value}}</text>
									</view>
								</view>
							</view>
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>
		</view>
		<l-popup v-model="playData.choose" :closeOnClickOverlay="false" zindex="1000" position="top">
			<view class="flex aic jcc ptb30">
				<view class="f36r fweight4 fontg">关卡切换</view>
			</view>
			<uv-grid :col="4">
				<uv-grid-item v-for="(item,index) in playData.unit" :key="index">
					<view class="plr10 ptb20 flex box w100p pst" @click="PlayUnit(index)">
						<view :class="index == playData.chooseIndex ?`flex jcc ptb20 plr20 box bd44 bd44-avtive w100p` :`flex jcc ptb20 plr20 box bd44 w100p`"><text class="f28r fweight4">{{item.title}}</text></view>
					</view>
				</uv-grid-item>
			</uv-grid>
			<view class="tb20 flex plr20 ptb30">
				<view class="f1 flex jcc aic f36r ptb20 bg44 fweight4" @click="PlayStart">游戏开始</view>
			</view>
		</l-popup>
		<l-popup v-model="playData.load" bgColor="#ffffff00" :closeOnClickOverlay="false" zindex="1001">
			<l-liquid :percent="70" outline  innerColor="#b6ead3" waveColor="#44d7bb">
			  <view class="load-txt">
				<text>{{playData.remark}}</text>
			  </view>
			</l-liquid>
		</l-popup>
		<l-popup v-model="playData.hi" bgColor="#ffffff00" zindex="1001">
			<view class="w100p flex jcc aic">
				<view class="ft20 red">恭喜闯关成功</view>
			</view>
		</l-popup>
	</view>
</template>
<script setup>
	import { util } from '/common/util.js'
	import { ref , reactive, nextTick,toRefs, watch  } from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	
	const playData = reactive({
		playId:0,
		load:true,
		choose:false,
		chooseIndex:0,
		unit:[],
		game:[],
		remark:'正在加载游戏',
		selected:null,
		errVedio:'',
		pengVedio:'',
		allVedio:'',
		hi:false,
	})
	const getGameUnit = () => {
		util.request({
			url:"/mpindex/gameunit",
			data:{id:playData.playId},
			success:function(res){
				if(res.code == 1){
					playData.unit = res.data.unit
					playData.game = res.data.game
					playData.choose = true
					playData.load = false
				}else{
					playData.remark = '此单元无词组游戏'
				}
			}
		})
	}
	playData.errVedio = uni.getStorageSync('RHTY_ERR')
	playData.pengVedio = uni.getStorageSync('RHTY_PENG')
	playData.allVedio = uni.getStorageSync('RHTY_ALL')
	const audioPlay = (audio)=>{
		const innerAudioContext  = wx.createInnerAudioContext({useWebAudioImplement:true});
		innerAudioContext .volume =1
		innerAudioContext .src = "https:"+audio
		innerAudioContext .play()
		innerAudioContext .onPlay(() => {
		  console.log('开始播放');
		});
		innerAudioContext .onError((res) => {
		  console.log(res.errMsg);
		  console.log(res.errCode);
		});
		setTimeout(function(){
			innerAudioContext.stop() // 停止
			innerAudioContext.destroy()
		},1500)
	}
	const PlayUnit =(index)=>{
		playData.chooseIndex = index;
		
	}
	const PlayStart = ()=>{
		const { id } =playData.unit[playData.chooseIndex];
		util.request({
			url:"/mpindex/game",
			data:{id:id},
			success:function(res){
				if(res.code == 1){
					playData.game = res.data
					playData.choose = false

				}else{
					playData.remark = '此关卡无数据'
					playData.load = true
					
				}
			}
		})
	}
	
	const choosePlay = (item,index)=>{
		//todo 播放单词
		audioPlay(item.audio);
		if(playData.selected === null){
			playData.selected = {
				item:item,index:index
			}
			console.log(playData.selected);
		}else{
			if(index == playData.selected.index){
				return ;
			}
			console.log(playData.selected);
			if(playData.selected.item.ids === item.ids){
				playData.game.splice(index > playData.selected.index ? index : playData.selected.index,1);
				playData.game.splice(index < playData.selected.index ? index : playData.selected.index,1);
				setTimeout(function(){
					audioPlay(playData.pengVedio)
				},500)
				
			}else{
				setTimeout(function(){
				audioPlay(playData.errVedio)
				},500)
			}
			playData.selected = null;
			if(playData.game.length == 0){
				setTimeout(function(){
					audioPlay(playData.allVedio)
				},800)
				playData.hi=true;
			}
		}
	}
	const handleback = ()=>{
		uni.navigateBack()
	}
	onLoad( (opt) => {
		playData.playId = opt.id
		getGameUnit()
		console.log(playData);
	})
</script>
<style scoped lang="scss">
	.fontg{color:#44d7bb;}
	.pst{perspective:800px;}
	.w720{width:720rpx; min-height:100rpx;}
	.bd44{border:1rpx solid #eee;color:#44d7bb; border-radius:3rpx;}
	.bd44-avtive{ border-color: #44d7bb !important;}
	.bg44{background-image:linear-gradient(#44d7bb,#36c1a7,#44d7bb);color:#fff; border-radius:5rpx;}
	.bg55{background-image:linear-gradient(#73b2ff,#5d9eff,#73b2ff);color:#fff; border-radius:5rpx;}
	.load-txt{color:#fff;}
	.game_top{height:200rpx; position: relative;
		.backBtn{position: absolute; top:30rpx; right:15rpx; padding:10rpx 20rpx; font-size: 30rpx; text-align: center;background-color: #fff; 
		border-radius: 4rpx; color:#f0456d;font-weight: 600;}
		.tabBtn{position: absolute; bottom:30rpx; right:15rpx; padding:10rpx 20rpx; font-size: 30rpx; text-align: center;background-color: #fff; 
		border-radius: 4rpx; color:#3283ff;font-weight: 600;}
	}
	
	.game_top image{width:100%;height: 100%;}
	.game{height:calc(100vh - 200rpx); box-sizing: border-box; background-color: #FFF8F0;z-index:0;position: relative;}
	.game-info:before{content:"";position:absolute; top:0;left:0;height:10rpx;width:100%;background-image: linear-gradient(to bottom, #fff3e1 0%,#dfd9d2 30%,#dfd9d2 70%,#fff3e1 100%);z-index: 6;}
	.game:after{content:"";position:absolute; top:0;left:0;height:calc(100vh - 200rpx);width:10rpx;background-image: linear-gradient(to right, #fff3e1 0%,#dfd9d2 30%,#dfd9d2 70%,#fff3e1 100%);z-index: 1;}
	.game-info{height:calc(100vh - 200rpx); box-sizing: border-box; z-index:2;position: relative; padding:15rpx; overflow: hidden; overflow-y: auto;}
	.game:before{content:"";position:absolute; left:0;bottom:0;height:10rpx;width:100%;background-image: linear-gradient(to top, #fff3e1 0%,#dfd9d2 30%,#dfd9d2 70%,#fff3e1 100%);z-index: 1;}
	.game-info:after{content:"";position:absolute; top:0;right:0;height:calc(100vh - 200rpx);width:10rpx;background-image: linear-gradient(to right, #fff3e1 0%,#dfd9d2 30%,#dfd9d2 70%,#fff3e1 100%);z-index: 5;}
	.cirle{height:220rpx; width:220rpx;word-wrap: break-word; /* 或 overflow-wrap: break-word; */
  word-break: break-all; /* 这将允许在英文单词内部换行 */}
	.rdmcolor1{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #5F2093);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #5F2093;z-index: -2;}
	}
	.rdmcolor2{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #3283ff);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #3283ff;z-index: -2;}
	}
	.rdmcolor3{
		border-radius: 50%;width: 100%;height: 100%; position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #f0456d);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #f0456d;z-index: -2;}
	}
	.rdmcolor4{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #c332c8);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #c332c8;z-index: -2;}
	}
	.rdmcolor5{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #98b970);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #98b970;z-index: -2;}
	}
	.rdmcolor6{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #b1958c);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #b1958c;z-index: -2;}
	}
	.rdmcolor7{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #ff2124);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #ff2124;z-index: -2;}
	}
	.rdmcolor8{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #FF7D00);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #FF7D00;z-index: -2;}
	}
	.rdmcolor9{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #eec83b);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #eec83b;z-index: -2;}
	}
	.rdmcolor10{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #34c471);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #34c471;z-index: -2;}
	}
	.rdmcolor11{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #E57373);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #E57373;z-index: -2;}
	}
	.rdmcolor12{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #FF6B6B);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #FF6B6B;z-index: -2;}
	}
	.rdmcolor13{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #FFA07A);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #FFA07A;z-index: -2;}
	}
	.rdmcolor14{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #4ECDC4);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #4ECDC4;z-index: -2;}
	}
	.rdmcolor15{
		border-radius: 50%;width: 100%;height: 100%;position: relative;
		background: linear-gradient(138deg,#ffffffaa, #ffffff55, #F06292);
		&:before {content: "";position: absolute;left: 0;top:0;width:100%;height:100%;border-radius: 50%;background-color: #F06292;z-index: -2;}
	}
	.cirle-hover{transform: translate(6rpx, 2rpx);transform:scale(1.1)}
</style>